<template>
  <!-- 首页榜单 -- 推荐部分 -->
  <div class="hot-reco">
      <!-- 导航 -->
      <div class="nav">
          <div class="nav-left">
              <div class="bg">
                  <a href="javascript:;">榜单</a>
              </div>
          </div>
          <div class="nav-right">
              <a href="javascript:;">更多</a>
              <i></i>
          </div>
      </div>
      <!-- 内容 -->
      <div class="content">
          <dl class="content-item">
              <dt>
                  <div class="left">
                      <img src="./img/1.jpg" alt="榜单图片">
                      <a href="javascript:;" class="mask" title="飙升榜"></a>
                  </div>
                  <div class="right">
                      <a href="javascript:;" title="飙升榜">飙升榜</a>
                      <div class="dt-icon">
                          <a href="javascript:;" title="播放" class="play"></a>
                          <a href="javascript:;" title="收藏" class="collect"></a>
                      </div>
                  </div>
              </dt>
              <dd>
                  <ol>
                      <li class="clearfix">
                          <span>1</span>
                          <a href="javascript:;" title="武家坡" class="text-ellipsis spec">武家坡44444444444444444</a>
                          <div class="dd-icon">
                              <a href="javascript:;" title="播放" class="play"></a>
                              <a href="javascript:;" title="添加到播放列表" class="add-play"></a>
                              <a href="javascript:;" title="收藏" class="collect"></a>
                          </div>
                      </li>
                      <li class="clearfix">
                          <span>1</span>
                          <a href="javascript:;" title="武家坡" class="text-ellipsis spec">武家坡44444444444444444</a>
                          <div class="dd-icon">
                              <a href="javascript:;" title="播放" class="play"></a>
                              <a href="javascript:;" title="添加到播放列表" class="add-play"></a>
                              <a href="javascript:;" title="收藏" class="collect"></a>
                          </div>
                      </li>
                      <li class="clearfix">
                          <span>1</span>
                          <a href="javascript:;" title="武家坡" class="text-ellipsis spec">武家坡44444444444444444</a>
                          <div class="dd-icon">
                              <a href="javascript:;" title="播放" class="play"></a>
                              <a href="javascript:;" title="添加到播放列表" class="add-play"></a>
                              <a href="javascript:;" title="收藏" class="collect"></a>
                          </div>
                      </li>
                  </ol>
                  <!-- 查看全部 -->
                  <div class="showAll">
                      <a href="javascript:;">查看全部></a>
                  </div>
              </dd>
          </dl>
          <dl class="content-item">
              <dt>
                  <div class="left">
                      <img src="./img/1.jpg" alt="榜单图片">
                      <a href="javascript:;" class="mask" title="飙升榜"></a>
                  </div>
                  <div class="right">
                      <a href="javascript:;" title="飙升榜">飙升榜</a>
                      <div class="dt-icon">
                          <a href="javascript:;" title="播放" class="play"></a>
                          <a href="javascript:;" title="收藏" class="collect"></a>
                      </div>
                  </div>
              </dt>
              <dd>
                  <ol>
                      <li class="clearfix">
                          <span>1</span>
                          <a href="javascript:;" title="武家坡" class="text-ellipsis spec">武家坡44444444444444444</a>
                          <div class="dd-icon">
                              <a href="javascript:;" title="播放" class="play"></a>
                              <a href="javascript:;" title="添加到播放列表" class="add-play"></a>
                              <a href="javascript:;" title="收藏" class="collect"></a>
                          </div>
                      </li>
                      <li class="clearfix">
                          <span>1</span>
                          <a href="javascript:;" title="武家坡" class="text-ellipsis spec">武家坡44444444444444444</a>
                          <div class="dd-icon">
                              <a href="javascript:;" title="播放" class="play"></a>
                              <a href="javascript:;" title="添加到播放列表" class="add-play"></a>
                              <a href="javascript:;" title="收藏" class="collect"></a>
                          </div>
                      </li>
                      <li class="clearfix">
                          <span>1</span>
                          <a href="javascript:;" title="武家坡" class="text-ellipsis spec">武家坡44444444444444444</a>
                          <div class="dd-icon">
                              <a href="javascript:;" title="播放" class="play"></a>
                              <a href="javascript:;" title="添加到播放列表" class="add-play"></a>
                              <a href="javascript:;" title="收藏" class="collect"></a>
                          </div>
                      </li>
                  </ol>
                  <!-- 查看全部 -->
                  <div class="showAll">
                      <a href="javascript:;">查看全部></a>
                  </div>
              </dd>
          </dl>
          <dl class="content-item">
              <dt>
                  <div class="left">
                      <img src="./img/1.jpg" alt="榜单图片">
                      <a href="javascript:;" class="mask" title="飙升榜"></a>
                  </div>
                  <div class="right">
                      <a href="javascript:;" title="飙升榜">飙升榜</a>
                      <div class="dt-icon">
                          <a href="javascript:;" title="播放" class="play"></a>
                          <a href="javascript:;" title="收藏" class="collect"></a>
                      </div>
                  </div>
              </dt>
              <dd>
                  <ol>
                      <li class="clearfix">
                          <span>1</span>
                          <a href="javascript:;" title="武家坡" class="text-ellipsis spec">武家坡44444444444444444</a>
                          <div class="dd-icon">
                              <a href="javascript:;" title="播放" class="play"></a>
                              <a href="javascript:;" title="添加到播放列表" class="add-play"></a>
                              <a href="javascript:;" title="收藏" class="collect"></a>
                          </div>
                      </li>
                      <li class="clearfix">
                          <span>1</span>
                          <a href="javascript:;" title="武家坡" class="text-ellipsis spec">武家坡44444444444444444</a>
                          <div class="dd-icon">
                              <a href="javascript:;" title="播放" class="play"></a>
                              <a href="javascript:;" title="添加到播放列表" class="add-play"></a>
                              <a href="javascript:;" title="收藏" class="collect"></a>
                          </div>
                      </li>
                      <li class="clearfix">
                          <span>1</span>
                          <a href="javascript:;" title="武家坡" class="text-ellipsis spec">武家坡44444444444444444</a>
                          <div class="dd-icon">
                              <a href="javascript:;" title="播放" class="play"></a>
                              <a href="javascript:;" title="添加到播放列表" class="add-play"></a>
                              <a href="javascript:;" title="收藏" class="collect"></a>
                          </div>
                      </li>
                  </ol>
                  <!-- 查看全部 -->
                  <div class="showAll">
                      <a href="javascript:;">查看全部></a>
                  </div>
              </dd>
          </dl>
      </div>
  </div>
</template>

<script>
export default {
    name:'song-list',
}
</script>

<style scoped lang="scss">
    .hot-reco{
        width: 730px;
        box-sizing: border-box;
        padding: 20px;
        // 导航
        .nav{
            width: 100%;
            height: 35px;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            line-height: 35px;
            border-bottom: 2px solid #C10D0C;
            margin-bottom: 15px;
            a:hover{
                text-decoration: underline !important;
            }
            .bg a:hover{
                text-decoration: none !important;
            }
            .nav-left{
                display: flex;
                .bg{
                    background: url('@/assets/index.png') no-repeat;
                    background-position: -220px -154px;
                    padding: 0 10px 0 34px;
                    font-size: 20px;
                    a{
                        color: #333;
                        margin:0 15px 0 10px;
                    }
                }
                a{
                    text-decoration: none;
                    color: #666;
                }
                span{
                    margin: 0 10px;
                    color: #ccc;
                }
            }
            .nav-right{
                line-height: 35px;
                a{
                    text-decoration: none;
                    color: #666;
                }
                i{
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    background: url('@/assets/index.png') no-repeat;
                    background-position: 0 -239px;
                    margin:0 10px 0 5px;
                }
            }
        }
        .content{
            // width: 689px;
            width: 690px;
            height: 472px;
            background-color: #f5f5f5;
            background: url('@/assets/index_bill.png') no-repeat;
            display: flex;
            .content-item{
                width: 230px;
                height: 100%;
                a:hover{
                    text-decoration: underline;
                }
                dt{
                    font-size: 14px;
                    padding: 20px 0 20px 20px;
                    box-sizing: border-box;
                    display: flex;
                    .left{
                        width: 80px;
                        height: 80px;
                        position: relative;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                        .mask{
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            background: url('@/assets/coverall.png') no-repeat;
                            background-position: -145px -57px;
                        }
                    }
                    .right{
                        width: 122px;
                        padding: 10px;
                        box-sizing: border-box;
                        a{
                            color: #333;
                            font-weight: bold;
                        }
                        .dt-icon{
                            .play,.collect{
                                display: inline-block;
                                width: 22px;
                                height: 22px;
                                background: url('@/assets/index.png') no-repeat;
                            }
                            .play{
                                background-position: -267px -205px;
                                margin: 12px 10px 0 0;
                                &:hover{
                                    background-position: -267px -235px;
                                }
                            }
                            .collect{
                                background-position: -300px -205px;
                                &:hover{
                                    background-position: -300px -235px;
                                }
                            }
                        }
                    }
                }
                dd{
                    height: 32px;
                    li{
                        width: 100%;
                        color: #000;
                        font-size: 14px;
                        line-height: 32px;
                        // border: 1px solid red;
                        span{
                            float: left;
                            width: 32px;
                            height: 32px;
                            text-align: center;
                            margin-left: 15px;
                        }
                        .spec{
                            color: #000;
                            font-size: 12px;
                            float: left;
                            width: 85px;
                            height: 32px;
                        }
                        .dd-icon{
                            width: 91px;
                            height: 32px;
                            line-height: 30px;
                            float: right;
                            text-align: center;
                            a{
                                margin: 0 3px;
                            }
                            .play,.collect{
                                display: inline-block;
                                width: 17px;
                                height: 18px;
                                background: url('@/assets/index.png') no-repeat;
                                vertical-align: middle;
                            }
                            .play{
                                background-position: -267px -268px;
                                &:hover{
                                    background-position: -267px -288px;
                                }
                            }
                            .collect{
                                background-position: -296px -268px;
                                &:hover{
                                    background-position: -296px -288px;
                                }
                            }
                            .add-play{
                                width: 17px;
                                height: 17px;
                                display: inline-block;
                                background: url('@/assets/icon.png') no-repeat;
                                background-position: 2px -698px;
                                vertical-align: middle;
                                &:hover{
                                    background-position: -20px -698px;
                                }
                            }
                        }
                    }
                    .showAll{
                        line-height: 32px;
                        font-size: 12px;
                        a{
                            color: #000;
                            float: right;
                            margin-right: 20px;
                            &:hover{
                                text-decoration: underline;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
